﻿<template>
    <a-modal centered :width="640" :title="modifyEntity.title" :visible="modifyEntity.showDetail" @cancel="handleRefresh">
        <!--保存按钮-->
        <template slot="footer">
            <a-row>
                <a-col :span="24">
                    <a-button icon="close-circle" @click="handleRefresh">取消</a-button>
                    <a-divider type="vertical" />
                </a-col>
            </a-row>
        </template>

        <a-spin :spinning="spinning">
            <a-descriptions bordered layout="vertical" size="small" column="2">
                <a-descriptions-item label='账号'>
                    {{ entity.account }}
                </a-descriptions-item>
                <a-descriptions-item label='昵称'>
                    {{ entity.nickName }}
                </a-descriptions-item>
                <a-descriptions-item label='手机号'>
                    {{ entity.phone }}
                </a-descriptions-item>
                <a-descriptions-item label='邮箱'>
                    {{ entity.email }}
                </a-descriptions-item>
                <a-descriptions-item label='微信账户'>
                    {{ entity.weChartAccount }}
                </a-descriptions-item>
                <a-descriptions-item label='所属站点'>
                    <a-select disabled mode="multiple" allowClear show-search v-model="entity.tenantIds">
                        <a-select-option v-for="item in tenantIdsList" :key="item.id" :value="item.id">{{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-descriptions-item>
                <a-descriptions-item label='状态'>
                    {{ entity.status }}
                </a-descriptions-item>
                <a-descriptions-item label='创建时间'>
                    {{ entity.createTime }}
                </a-descriptions-item>
                <a-descriptions-item label='创建人'>
                    {{ entity.createUser }}
                </a-descriptions-item>
                <a-descriptions-item label='修改时间'>
                    {{ entity.updateTime }}
                </a-descriptions-item>
                <a-descriptions-item label='修改人'>
                    {{ entity.updateUser }}
                </a-descriptions-item>
                <a-descriptions-item label='描述'>
                    {{ entity.description }}
                </a-descriptions-item>
            </a-descriptions>

        </a-spin>
    </a-modal>
</template>

<script>
import { queryTenantsList } from "@/views/tenantsModule/tenants/tenants";
import { getAdmin } from './admin'
import footerToolBar from '@/components/footerToolbar'
export default {
    components: {
        footerToolBar,
    },
    props: {
        modifyEntity: {
            type: Object,
            required: true,
            default: function () {
                return {
                    // 传递的主键
                    id: '',
                    // 页面操作类型
                    operation: this.operationFlag.Add,
                    // 是否展示编辑页面
                    showDetail: false,
                    // 标题
                    title: ''
                }
            },
        },
    },
    data() {
        return {
            // 遮罩层加载
            spinning: false,
            entity: {},
            tenantIdsList: [],
        }
    },
    created() {
        queryTenantsList().then((res) => {
            this.tenantIdsList = res.data;
        });
    },
    mounted() {
        this.loadData()
    },
    methods: {
        //#region 加载数据
        loadData() {
            this.spinning = true;
            let that = this;
            //修改，详情获取详细信息 
            getAdmin(this.modifyEntity.id).then((res) => {
                this.entity = res.data
                that.spinning = false;
            })
                .catch((error) => {
                    that.spinning = false;
                });
        },
        //#endregion

        //#region  取消、关闭
        // 取消、关闭
        handleRefresh() {
            this.spinning = false
            this.$emit('handleRefresh')
        },
        //#endregion
    },
}
</script>